/**
* 头部菜单
*/
<template>
  <div>

    <el-menu class="el-menu-demo" mode="horizontal" background-color="#637085" text-color="#fff" active-text-color="#fff">
      <el-button class="buttonimg">
        <img class="showimg" :src="collapsed?imgsq:imgshow" @click="toggle(collapsed)">
      </el-button>
      <el-submenu
        index="2"
        class="submenu tac"
        v-if="userInfo">
        <template slot="title">
          {{userInfo.roleName == '超级管理员' ? userInfo.roleName : userInfo.userName}}
        </template>
        <el-menu-item
          index="2-1"
          class="tac"
          @click="openDialog('setting', '企业设置')">
          企业设置
        </el-menu-item>
        <el-menu-item
          index="2-2"
          class="tac"
          @click="openDialog('user', '用户管理')">
          用户管理
        </el-menu-item>
        <el-menu-item
            index="2-4"
            class="bdt mgt8 tac"
            @click="exit()">
          退出
        </el-menu-item>
      </el-submenu>

    </el-menu>

<!--    <el-drawer-->
<!--      :title="title"-->
<!--      :before-close="handleClose"-->
<!--      :visible.sync="control.setting"-->
<!--      direction="rtl"-->
<!--      custom-class="demo-drawer"-->
<!--      ref="drawer"-->
<!--    >-->
    <el-drawer
      :title="title"
      :before-close="handleClose"
      :visible.sync="control.setting"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content pd20 box-b flex column h100">
        <el-form class="flex1 w100 disb edit-class" :model="editForm" ref="editForm" :rules="rules">
          <el-form-item label="公司名称" :label-width="formLabelWidth">
            <el-input disabled v-model="editForm.accountType" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户名" :label-width="formLabelWidth"
                        prop="userName">
            <el-input disabled v-model="editForm.userName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth"
                        prop="phone">
            <el-col :span="10" class="pdr20">
              <el-select v-model="editForm.code" placeholder="请选择">
                <el-option v-for="type in codeList" :label="type.label" :value="type.code" :key="type.code"></el-option>
              </el-select>
            </el-col>
            <el-col :span="14">
              <el-input v-model="editForm.phone" auto-complete="off" placeholder="请输入手机号码"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth"
                        prop="email">
            <el-input v-model="editForm.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="创建时间" prop="createTime"
                        :label-width="formLabelWidth">
            <el-date-picker
              disabled
              v-model="editForm.createTime"
              type="date"
              placeholder="选择创建时间"
              format="yyyy-MM-dd"
              value-format="timestamp">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer flex w100">
          <el-button class="flex1 flex-box" @click="cancelForm('setting')">取 消</el-button>
          <el-button class="flex1 flex-box mgl20" type="primary" @click="submitEditForm('editForm', 'userSetting')" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>

    <el-drawer
      :title="title"
      :before-close="handleCloseUser"
      :visible.sync="control.user"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <div class="demo-drawer__content pd20 box-b flex column h100">
        <div class="w100">
          <div class="between-box h60 mgb10 bdb">
            <div class="flex-align">
              <div class="flex-align">
                <i style="cursor:pointer;"
                   class="iconfont icon-yonghuming fs30 color47"></i>
              </div>
              <div class="mgl10 color65">
                用户名
              </div>
            </div>
            <div class="color30 fw500">
              {{editUser.userName || ''}}
            </div>
          </div>
          <div class="between-box h60 mgb10 bdb">
            <div class="flex-align">
              <div class="flex-align">
                <i style="cursor:pointer;"
                   class="iconfont icon-shoujitianchong fs30 blue-color"></i>
              </div>
              <div class="mgl10 color65">
                手机
              </div>
            </div>
            <div class="color30 fw500">
              {{editUser.phone || ''}}
            </div>
          </div>
          <div class="between-box h60 mgb10 bdb">
            <div class="flex-align">
              <div class="flex-align">
                <i style="cursor:pointer;"
                   class="iconfont icon-youxiang fs30 color9e"></i>
              </div>
              <div class="mgl10 color65">
                邮箱
              </div>
            </div>
            <div class="color30 fw500">
              {{editUser.email || ''}}
            </div>
          </div>
          <div class="between-box h60 mgb10 bdb">
            <div class="flex-align">
              <div class="flex-align">
                <i style="cursor:pointer;"
                   class="iconfont icon-xiugaishijian fs30 blue-color"></i>
              </div>
              <div class="mgl10 color65">
                创建时间
              </div>
            </div>
            <div class="color30 fw500">
              {{editUser.createTime | timestampToDay}}
            </div>
          </div>
          <div class="between-box h60 mgb10 bdb">
            <div class="flex-align">
              <div class="flex-align">
                <i style="cursor:pointer;"
                   class="iconfont icon-anquanshezhi fs30 color1a"></i>
              </div>
              <div class="mgl10 color65">
                安全设置
              </div>
            </div>
            <div class="color30 fw500">
              <el-button size="mini" type="success"
                         @click="openDialog('editPsw', '修改密码')">
                重置密码
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>

    <!-- 修改密码编辑界面 -->
    <el-dialog :title="title" :visible.sync="control.editPsw" width="30%"
               @close='closeDialog("editPsw")'>
      <el-form label-width="100px" :model="editPsw" ref="editPsw" :rules="rulesPsw">
        <el-form-item label="原密码" prop="passWordOld">
          <el-input type="passWord" v-model="editPsw.passWordOld" auto-complete="off" placeholder="请输入原密码"
                    :type="pswOld.pwdType">
edit            <i slot="suffix" title="显示密码" @click="changePass('show', 'pswOld', 'editPsw.passWordOld')" style="cursor:pointer;"
               class="el-input__icon iconfont icon-xianshikejian"
               v-if="visible.pswOld"></i>
            <i slot="suffix" title="隐藏密码" @click="changePass('hide', 'pswOld', 'editPsw.passWordOld')" style="cursor:pointer;"
               class="el-input__icon iconfont icon-bukejian"
               v-else></i>
          </el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="passWord">
          <el-input type="passWord" v-model="editPsw.passWord" auto-complete="off" placeholder="请输入新密码"
                    :type="psw.pwdType">
            <i slot="suffix" title="显示密码" @click="changePass('show', 'psw', 'editPsw.passWord')" style="cursor:pointer;"
               class="el-input__icon iconfont icon-xianshikejian"
               v-if="visible.psw"></i>
            <i slot="suffix" title="隐藏密码" @click="changePass('hide', 'psw', 'editPsw.passWord')" style="cursor:pointer;"
               class="el-input__icon iconfont icon-bukejian"
               v-else></i>
          </el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="passWordComfirm">
          <el-input type="passWord" v-model="editPsw.passWordComfirm" auto-complete="off" placeholder="请输入确认新密码"
                    :type="pswComfirm.pwdType">
            <i slot="suffix" title="显示密码" @click="changePass('show', 'pswComfirm', 'editPsw.passWordComfirm')" style="cursor:pointer;"
               class="el-input__icon iconfont icon-xianshikejian"
               v-if="visible.pswComfirm"></i>
            <i slot="suffix" title="隐藏密码" @click="changePass('hide', 'pswComfirm', 'editPsw.passWordComfirm')" style="cursor:pointer;"
               class="el-input__icon iconfont icon-bukejian"
               v-else></i>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click='closeDialog("editPsw")'>取消</el-button>
        <el-button type="primary" class="title" @click="submitEditForm('editPsw', 'resetPsw')">保存</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
import {mapGetters} from "vuex";
export default {
  name: 'navcon',
  data() {
    return {
      collapsed: true,
      imgshow: require('../assets/img/show.png'),
      imgsq: require('../assets/img/sq.png'),
      //控制页面显示与隐藏
      control:{
        setting: false, //企业设置
        user: false,//用户管理
        editPsw: false,//修改密码
      },
      title: '',
      // drawer抽屉
      loading: false,
      editForm: {
        id: '',
        accountType: '',
        userName: '',
        code: '',
        phone: '',
        email: '',
        createTime: ''
      },
      formLabelWidth: '80px',
      // rules表单验证
      rules: {
        accountType: [
          { required: true, message: '请输入用企业名称', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        // email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            required: true,
            message: '请输入正确的邮箱',
            trigger: 'blur'
          }
        ],
        phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
        // passWord: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        // phone: [
        //   { required: true, message: '请输入手机号', trigger: 'blur' },
        //   {
        //     pattern: /^1(3\d|47|5((?!4)\d)|7(0|1|[6-8])|8\d)\d{8,8}$/,
        //     required: true,
        //     message: '请输入正确的手机号',
        //     trigger: 'blur'
        //   }
        // ],
      },
      editUser: {
        id: '',
        userName: '',
        phone: '',
        email: '',
        createTime: ''
      },
      editPsw: {
        userId: '',
        passWordOld: '',
        passWord: '',
        passWordComfirm: ''
      },
      rulesPsw: {
        passWordOld: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
        passWord: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
        passWordComfirm: [{ required: true, message: '请输入确认新密码', trigger: 'blur' }]
      },
      psw: { pwdType: 'password'},
      pswOld: { pwdType: 'password'},
      pswComfirm: { pwdType: 'password'},
      visible: {
        psw: true,
        pswOld: true,
        pswComfirm: true,
      },
      codeList: this.$store.state.codeList,
      timer: null,
    }
  },
  // 创建完毕状态(里面是操作)
  created() {

  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    // 退出登录
    exit() {
      this.$confirm('退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          setTimeout(() => {
            this.$store.commit('clearMember')
            this.$router.push({ path: '/login' })
            this.$message({
              type: 'success',
              message: '已退出登录!'
            })
          }, 1000)
          // this.apiUrl.logOut()
          //   .then(res => {
          //     if (res.success) {
          //       //如果请求成功就让他2秒跳转路由
          //       setTimeout(() => {
          //         this.$store.commit('clearMember')
          //         this.$router.push({ path: '/login' })
          //         this.$message({
          //           type: 'success',
          //           message: '已退出登录!'
          //         })
          //       }, 1000)
          //     } else {
          //       this.$message.error(res.msg)
          //       this.logining = false
          //       return false
          //     }
          //   })
          //   .catch(err => {
          //     // 获取图形验证码
          //     this.getcode()
          //     this.logining = false
          //     this.$message.error('退出失败，请稍后再试！')
          //   })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 切换显示
    toggle(showtype) {
      this.collapsed = !showtype
      this.$root.Bus.$emit('toggle', this.collapsed)
    },
    // 打开编辑弹出框
    openDialog(dialog, title) {
      const vm = this;
      vm.control[dialog] = true
      vm.title = title
      if (dialog == 'setting') {
        vm.editForm = vm.userInfo
      } else if (dialog == 'user'){
        vm.editUser = vm.userInfo
      } else {
        vm.editPsw.userId = vm.userInfo.userId
      }
    },
    handleClose(done) {
      this.cancelForm('setting')
      // if (this.loading) {
      //   return;
      // }
      // this.$confirm('确定要提交表单吗？')
      //   .then(_ => {
      //     this.loading = true;
      //     this.timer = setTimeout(() => {
      //       done();
      //       // 动画关闭需要一定的时间
      //       setTimeout(() => {
      //         this.loading = false;
      //       }, 400);
      //     }, 2000);
      //   })
      //   .catch(_ => {
      //     this.cancelForm('setting')
      //   });
    },
    handleCloseUser() {
      this.cancelForm('user')
    },
    cancelForm(name) {
      this.loading = false;
      this.control[name] = false;
      clearTimeout(this.timer);
    },
    changePass(value, name, str) {
      const vm = this
      const strlist=str.split('.')
      if(!vm[strlist[0]][strlist[1]]){
        return
      }
      vm[name].pwdType = value == 'show' ? 'text' : 'password'
      vm.visible[name] = !(value === 'show');
    },
    // 关闭编辑弹出框
    closeDialog(dialog) {
      const vm = this;
      vm.control[dialog] = false
    },
    // 编辑、添加提交方法
    submitEditForm(editData, editUrl) {
      const vm = this
      let param = vm[editData]
      if(editData == 'editPsw'){
        vm[editData] = {}
        if(param.passWordOld){
          param.passWordOld = vm.$md5(param.passWordOld)
        }
        if(param.passWord){
          param.passWord = vm.$md5(param.passWord)
        }
        if(param.passWordComfirm){
          param.passWordComfirm = vm.$md5(param.passWordComfirm)
        }
      }
      vm.$refs[editData].validate(valid => {
        if (valid) {
          // 请求方法
          vm.openFullScreen();
          let request = vm.apiUrl[editUrl](param,"POST")
          request.then(res => {
              vm.closeFullScreen(vm.openFullScreen());
              const { code,msg } = res;
              if (code != 0) {
                vm.showMessageMin({
                  type: 'error',
                  message: msg
                })
              } else {
                if(editData == 'editForm'){
                  vm.cancelForm('setting')
                  vm.showMessageMin({
                    type: 'success',
                    message: '数据保存成功！'
                  })
                  vm.$store.dispatch('getMemberInfo')
                }else if(editData == 'editPsw'){
                  vm.closeDialog('editPsw');
                  vm.$store.commit('clearMember')
                  vm.$router.push({ path: '/login' })
                  vm.$message({
                    type: 'success',
                    message: '请重新登录!'
                  })
                }
              }
            })
        } else {
          return false
        }
      })
    },

  }
}
</script>
<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
}
.submenu {
  float: right;
}
.buttonimg {
  height: 60px;
  background-color: transparent;
  border: none;
}
.showimg {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 17px;
  left: 17px;
}
.showimg:active {
  border: none;
}
</style>
